<template>


  <div><div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <div class="contain">
        <el-row>
          <div class="xf-tabletop-handles" style="margin-left: 500px">
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" style="background-color: black;"></el-amap-search-box>
          </div>
        </el-row>
        <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" style="margin-top: 50px;">
          <el-amap-marker :position="center" key="100"></el-amap-marker>
        </el-amap>
            <div v-if="searchResult" style="background-color: white">
              搜索:{{content}},详细地址为:{{searchResult.locationName}},经度:{{searchResult.longitude}},纬度:{{searchResult.latitude}}
            </div>
      </div>
    </div>
  </div>



</template>

<script>
export default {
  name: 'AMapDemo',
  data() {
    return {
      zoom: 12,
      center: [118.02, 24.48],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false
      },
      content: '',
      inputValue: '',
      searchResult: {
        address: '',
        latitude: '',
        longitude: '',
        name: '',
        type: '',
        country: '',
        province: '',
        city: '',
        area: '',
        township: '',
        street: '',
        neighborhood: '',
        locationName: ''
      }
    }
  },
  methods: {
    onSearchResult(pois) {
      //搜索
      console.log(pois)
      let latSum = 0
      let lngSum = 0
      let that = this
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0]
        let lng = poi["lng"]
        let lat = poi["lat"]
        that.center = [lng, lat]
        that.zoom = 13
        that.content = poi.name
        console.log(poi.name)
        that.searchResult.address = poi.address
        that.searchResult.latitude = poi.lat
        that.searchResult.longitude = poi.lng
        let geocoder = new AMap.Geocoder({})
        geocoder.getAddress(that.center, function(status, result) {
          console.log(result)
          if (status === 'complete' && result.info === 'OK') {
            let obj = result.regeocode.addressComponent
            that.searchResult.locationName = obj.province + obj.city + obj.district + obj.township + obj.street +
              poi.address
          }
        });

      } else {
        that.searchResult = []
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.amap-demo {
  width: 100%;
  height: 600px;
  position: relative;
}

.search-box {
  height: 35px;
  margin: 10px auto;
  width: calc(100% - 20px);
  // border-radius:16px;
  box-shadow: none;
  background: #ffff;
  border: 1px solid #e6e6e6;

  .search-box-wrapper {
    input {
      background: #fff;
      padding-left: 20px;
    }

    .search-btn {
      color: #2A67FE;
      width: 90px;
      height: 20px;
      box-sizing: border-box;
      border-left: 1px solid #D7D7D7;
    }
  }
}
</style>
